@font-face {
  font-family: 'tuniao-xiaowei';
  src: url('https://resource.tuniaokj.com/images/vue3-template/template2-website/font/tuniao-xiaowei.ttf');
}

/* 顶部背景 start */
.top-bg {
  position: fixed;
  top: 0rpx;
  left: 0rpx;
  width: 100%;
  height: 100vh;
  z-index: -1;
  // background: linear-gradient(rgb(216, 229, 255), rgb(255, 255, 255));
  background-size: 100% auto;
  height: 100vh;
  background-color: #f1f5fb;
  &::before {
    content: '';
    display: block;
    padding-top: 100%;
  }
}
/* 顶部背景 end */

/* 页面内容 start */
.page {
  position: relative;
  width: 100%;
  padding-bottom: 72rpx;
}
.footer-show{
	height: 140rpx;
	position: fixed;
	bottom: 0;
	width: 100%;
	margin: 0 auto;
	background-color: #FFFFFF;
	.btn{
		width: 690rpx;
		margin: 0 auto;
		color: #ffffff;
		background-color: #4c49e9;
		height: 80rpx;
		border-radius: 80rpx;
		margin-top:20rpx;
	}
}
.footer {
  padding: 0 80rpx;
  padding-top: 60rpx;
  height: 360rpx;
  background: linear-gradient( 180deg, #3B41A3 0%, #3E40A7 100%);
  // position: fixed;
  bottom: 0;
  width: 100%;
  border-top-left-radius: 120rpx;
  border-top-right-radius: 120rpx;
  .footer-btn {
    // width: 140rpx;
    margin: 0 auto;
    text-align: center;
    image {
      background-color: white;
      padding: 12rpx;
      margin: 0 auto;
      box-shadow: 0rpx 8rpx 8rpx 0rpx #f8f8f8;
    }
  }
}
.popup-box {
  .popup-title {
    padding: 48rpx 0;
  }
  .popup-contnet {
    height: 480rpx;
    overflow: scroll;
    .items {
    }
    .items-line {
      width: 536rpx;
      // word-break: break-all;
      word-wrap: wrap;
      text-align: left;
    }
    .split-line {
      border-bottom: 2rpx dotted #dcdcdc;
    }
  }
  .popup-footer {
  }
  .close-icon {
    width: 48rpx;
    height: 48rpx;
  }
  .play-icon,
  .translate-icon {
    width: 32rpx;
    height: 32rpx;
  }
  .popup-footer {
    margin: 0 auto;
    text-align: center;
    padding-bottom: 45rpx;
    .footer-btn {
      width: 120rpx;
      height: 120rpx;
      background: linear-gradient(90deg, #4b49e8 0%, #6b8bfb 100%);
      border-radius: 50%;
      margin: 0 auto;
      .icon {
        width: 72rpx;
        height: 72rpx;
      }
    }
  }
}

/* 用户头像 start */
.logo-image {
  width: 60rpx;
  height: 60rpx;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

.logo-pic {
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: top;
  border: 1rpx solid #f8f7f8;
  // box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  overflow: hidden;
  // background-color: #FFFFFF;
}

/* 用户头像 start */
.logo-image2 {
  width: 45rpx;
  height: 45rpx;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

.logo-pic2 {
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: top;
  border: 1rpx solid #f8f7f8;
  // box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  overflow: hidden;
  // background-color: #FFFFFF;
}

.f-color-text {
  background: linear-gradient(90deg, #4b49e8 0%, #6b8bfb 100%);
  color: white;
  border-radius: 20rpx 0 20rpx 20rpx;
}
/* 动画 */
.prompt {
  width: 100%;
  height: 80px;
  position: fixed;
  bottom: 100px;
  z-index: 99999;
}

.prompt text {
  position: absolute;
  bottom: 2px;
  color: #f3a73f;
  left: calc(45%);
  animation: puls 1.5s infinite ease-in-out;
}

.dots-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 45%;
  position: absolute;
  bottom: 0px;
  left: calc(27.5%);
  background-color: #fdedd9;
  border-radius: 20px;
}

.dot {
  height: 16px;
  width: 16px;
  margin-right: 10px;
  border-radius: 10px;
  background-color: #f3a73f;
  animation: pulse 1.5s infinite ease-in-out;
}

.dot:last-child {
  margin-right: 0;
}

.dot:nth-child(1) {
  animation-delay: -0.3s;
}

.dot:nth-child(2) {
  animation-delay: -0.1s;
}

.dot:nth-child(3) {
  animation-delay: 0.1s;
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    background-color: #f3a73f;
    box-shadow: 0 0 0 0 rgba(243, 167, 63, 0.7);
  }

  50% {
    transform: scale(1.2);
    background-color: #f9d39f;
    box-shadow: 0 0 0 10px rgba(178, 212, 252, 0);
  }

  100% {
    transform: scale(0.8);
    background-color: #f3a73f;
    box-shadow: 0 0 0 0 rgba(243, 167, 63, 0.7);
  }
}

@keyframes puls {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-4px);
  }

  100% {
    transform: translateY(0px);
  }
}
.popup-main {
  background: linear-gradient(180deg, #dee2ff 0%, #ffffff 100%);
}
.top-box {
  width: 750rpx;
  height: 116rpx;
  background: #e8e8ff;
  border-radius: 32rpx 32rpx 32rpx 32rpx;
  color: #4b49e8;
}
.footer-btn-active {
  width: 110rpx;
  height: 110rpx;
  background: linear-gradient(90deg, #4b49e8 0%, #6b8bfb 100%);
  border-radius: 50%;
  margin: 0 auto;
  .icon {
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
}

.gifStyle {
  width: 52rpx !important;
  height: 52rpx !important;
  margin-top: -2rpx;
}

.pngStyle {
  width: 40rpx;
  height: 40rpx;
}

/* 加载动画*/
.loader {
  position: absolute;
  width: 120rpx;
  height: 120rpx;
  top: 35%;
  left: 48%;
  transform: translate(-50%, -50%);
}
.loader-text {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 60%;
}
.circle {
  color: #01beff;
  position: absolute;
  border-radius: 100%;
  width: 30rpx;
  height: 30rpx;
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
  -webkit-animation: spin 1s infinite ease-in-out;
  -moz-animation: spin 1s infinite ease-in-out;
  -o-animation: spin 1s infinite ease-in-out;
  animation: spin 1s infinite ease-in-out;
}

.loader :nth-child(1) {
  top: 5%;
  left: 50%;
  -webkit-animation-delay: -0.875s;
  -moz-animation-delay: -0.875s;
  -o-animation-delay: -0.875s;
  animation-delay: -0.875s;
}

.loader :nth-child(2) {
  top: 18.1801948466%;
  left: 81.8198051534%;
  -webkit-animation-delay: -0.75s;
  -moz-animation-delay: -0.75s;
  -o-animation-delay: -0.75s;
  animation-delay: -0.75s;
}

.loader :nth-child(3) {
  top: 50%;
  left: 95%;
  -webkit-animation-delay: -0.625s;
  -moz-animation-delay: -0.625s;
  -o-animation-delay: -0.625s;
  animation-delay: -0.625s;
}

.loader :nth-child(4) {
  top: 81.8198051534%;
  left: 81.8198051534%;
  -webkit-animation-delay: -0.5s;
  -moz-animation-delay: -0.5s;
  -o-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.loader :nth-child(5) {
  top: 94.9999999966%;
  left: 50.0000000005%;
  -webkit-animation-delay: -0.375s;
  -moz-animation-delay: -0.375s;
  -o-animation-delay: -0.375s;
  animation-delay: -0.375s;
}

.loader :nth-child(6) {
  top: 81.8198046966%;
  left: 18.1801949248%;
  -webkit-animation-delay: -0.25s;
  -moz-animation-delay: -0.25s;
  -o-animation-delay: -0.25s;
  animation-delay: -0.25s;
}

.loader :nth-child(7) {
  top: 49.9999750815%;
  left: 5.0000051215%;
  -webkit-animation-delay: -0.125s;
  -moz-animation-delay: -0.125s;
  -o-animation-delay: -0.125s;
  animation-delay: -0.125s;
}

.loader :nth-child(8) {
  top: 18.179464974%;
  left: 18.1803700518%;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}

@-webkit-keyframes spin {
  0%,
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
}

@-moz-keyframes spin {
  0%,
  100% {
    opacity: 1;
    -moz-transform: scale(1);
    transform: scale(1);
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 0;
    -moz-transform: scale(0);
    transform: scale(0);
  }
}

@-o-keyframes spin {
  0%,
  100% {
    opacity: 1;
    -o-transform: scale(1);
    transform: scale(1);
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 0;
    -o-transform: scale(0);
    transform: scale(0);
  }
}

@keyframes spin {
  0%,
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 0;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
  }
}
.dialogue-btn{
	width: 690rpx;
	height: 80rpx;
	background: #4B49E8;
	border-radius: 12rpx;
	margin:0 auto;
	margin-top: 24rpx;
}
.tips-box{
	background-color: rgb(221, 238, 248);
	width: 690rpx;
	border-radius: 12rpx;
	margin: 0 auto;
	margin-top: 60rpx;
	.tips-text{
		&_img{
			width: 50rpx;
			height: 50rpx;
		}
	}
	.tips-line{
		height: 2rpx;
		width: 100%;
		background-color: #999596;
	}
	.tips-list{
		.list{
			.line{
				width: 16rpx;
				height: 16rpx;
				background-color: #4B49E8;
				border-radius: 50%;
			}
			.image{
				width: 42rpx;
				height: 42rpx;
			}
		}
	}
}
